<template>
	<div class="lrcContainer flewCol">
		<div class="lrc flewCol" ref="lrc">

			<p v-for="(item,index) in lircdata.lirc" :key="index">
				<!-- 刚好渲染歌词中间部分 我太聪明了 -->
				<!-- :class 渲染中间正在演唱的歌词 为蓝色 给我牛逼坏了 -->
				<span v-if="Currentime>lircdata.lircTime[index-2]&&Currentime<lircdata.lircTime[index+3]"
					:class="Currentime>lircdata.lircTime[index]&&Currentime<lircdata.lircTime[index+1] ? 'lircolor' : ''">

					{{item}}
				</span>



			</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: "",
		props: {
			id: {
				type: [String, Number],

			},
			Currentime: {
				type: Number,
			}
		},
		data() {
			return {
				lircdata: {
					lirc: [],
					lircTime: []
				}
			}
		},


		methods: {
			start(arr) {
				for (var i = 0; i < arr.length; i++) {
					if (arr[i] === '[')
						return i
				}
			},
			end(arr) {
				for (var i = 0; i < arr.length; i++) {
					if (arr[i] === ']')
						return i
				}
			},
			// 歌词解析
			fliterLic(val) {
				if (!val) return;
				var lirycs = val.split('\n')
				var newlic = []
				var timelic = []
				for (var i = 0; i < lirycs.length; i++) {
					//push 按顺序添加数组
					//substr(index,length)指定index开始,length长度
					//sbustring(indexstart,indexend)
					//end() 找到】结束的 索引
					newlic.push(lirycs[i].substr(this.end(lirycs[i]) + 1));
					//number()字符串转num   
					var min = lirycs[i].substring(1, 3); //返回的字符串类型'00，'01'分钟
					var sec = lirycs[i].substring(4, 7); //返回字符串类型 秒钟
					timelic.push(Number(min) * 60 + Number(sec))
				}
				this.lircdata.lirc = newlic;
				this.lircdata.lircTime = timelic;
				// console.log(this.lircdata)
				// console.log(this.lircdata.lirc)

				// var a = "[00:00.000] 作曲 : Jean-Paul"
				// console.log(a.substr(this.end(a)+1))

			}
		},
		computed: {

		},
		watch: {
			// Currentime(val){
			// 	console.log(val)
			// }
		},
		created() {

		},
		async mounted() {

			const {
				data: res
			} = await this.$http.get('/lyric', {
				params: {
					id: this.id
				}

			})
			this.fliterLic(res.lrc.lyric)
			
		}
	}
</script>

<style scoped>
	.lircolor {
		font-size: large;

		background-image: -webkit-linear-gradient(bottom, lightseagreen, #98fff9, darkturquoise);

		-webkit-background-clip: text;

		-webkit-text-fill-color: transparent;
	}

	.active {
		color: red;
	}

	.lrcContainer {
		width: 100%;
		height: 110px;
		
		position: relative;
	}

	.lrc {
		align-items: center;
		justify-content: center;
		width: 100%;
		position: absolute;
		top: 0;
		
	}

	.lrc-p {
		height: 30px;
		line-height: 30px;
	}

	.up30 {
		margin-top: -30px;
	}
</style>
